<template>
	<view class="container position-relative">
		<view style="margin-bottom: 130rpx;">
			<view class="section-1">
				<template v-if="orderType == 'takein'">
					<list-cell class="location">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="store-name flex-fill">{{ store.shopName }}</view>
						</view>
					</list-cell>
				</template>
				<template v-else>
					<list-cell @click="chooseAddress">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center justify-content-between mb-10">
								<view class="font-size-extra-lg text-color-base">
										{{ `${address.provinceName}${address.cityName}${address.areaName}${address.communityName ? address.communityName : ''}${address.address}` }}
								</view>
								<image src="/static/images/navigator-1.png" class="arrow"></image>
							</view>
							<view class="d-flex text-color-assist font-size-sm align-items-center">
								<view class="mr-10">{{ address.consignee }}</view>
								<!-- <view class="mr-10">{{ !address.sex ? '先生' : '女士' }}</view> -->
								<view>{{ address.mobile }}</view>
							</view>
						</view>
					</list-cell>
				</template>
				<template v-if="orderType == 'takein'">
					<list-cell class="meal-time">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="title">取餐时间</view>
							<view class="time">立即用餐</view>
						</view>
					</list-cell>
					<!-- <list-cell class="contact" last :hover="false">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="title flex-fill">联系电话</view>
							<view class="time"><input class="text-right" placeholder="请输入手机号码" value="18666600000" /></view>
							<view class="contact-tip font-size-sm">自动填写</view>
						</view>
					</list-cell> -->
				</template>
				<template v-else>
					<list-cell>
						<view class="w-100 d-flex flex-column">
							<!-- <view class="d-flex align-items-center font-size-base text-color-base">
								<view class="flex-fill">预计送达时间</view>
								<view class="mr-10">15:18</view>
								<image src="/static/images/navigator-1.png" class="arrow"></image>
							</view> -->
							<view class="font-size-base text-color-primary">特殊时期减少接触，请修改下方订单备注</view>
						</view>
					</list-cell>
				</template>
			</view>
			<!-- 是否自取 -->
			<view class="isTakeIn">
				<view class="title">是否自取</view>
				<switch :checked="orderType=='takein' ? true:false" color="#FB586A"  @change="changeOrderType"/>
			</view>
			<!-- 购物车列表 begin -->
			<view class="section-2">
				<view class="cart d-flex flex-column" v-if="cart.payinfo && cart.payinfo.checkedGoodsList">
					<list-cell last v-for="(item, index) in cart.payinfo.checkedGoodsList" :key="index">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center mb-10">
								<view class="name-and-props overflow-hidden">
									<view class="text-color-base font-size-lg">{{ item.goodsName }}</view>
								</view>
								<view class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg">
									<view>x{{ item.number }}</view>
									<view>￥{{ item.marketPrice }}元{{item.goodsUnit?'/'+item.goodsUnit:''}}</view>
								</view>
							</view>
							<view class="text-truncate font-size-base text-color-assist">{{ item.attribute }}</view>
						</view>
					</list-cell>
					<template v-if="orderType == 'takeout'">
						<!-- <list-cell last v-if="store.packing_fee > 0">
							<view class="w-100 d-flex font-size-base align-items-center justify-content-between">
								<view>包装费</view>
								<view>￥{{ parseFloat(store.packing_fee) }}</view>
							</view>
						</list-cell> -->
						<list-cell last v-if="freightPrice > 0">
							<view class="w-100 d-flex font-size-base align-items-center justify-content-between">
								<view>配送费</view>
								<view>￥{{ parseFloat(freightPrice) }}元</view>
							</view>
						</list-cell>
					</template>
				</view>
				<list-cell last v-if="orderType == 'takeout' && freightPrice > 0">
					<view class="flex-fill d-flex justify-content-end align-items-center">
						<view>总计￥{{ total?total:'' }}元,实付</view>
						<view class="font-size-extra-lg font-weight-bold">￥{{ amount?amount:''}}元</view>
					</view>
				</list-cell>
				<list-cell last v-else>
					<view class="flex-fill d-flex justify-content-end align-items-center">
						<view>总计￥{{ total?(total - parseFloat(freightPrice)):'' }}元,实付</view>
						<view class="font-size-extra-lg font-weight-bold">￥{{ amount?(amount - parseFloat(freightPrice)):'' }}元</view>
					</view>
				</list-cell>
			</view>
			<!-- 购物车列表 end -->
			<view class="d-flex align-items-center justify-content-start font-size-sm text-color-warning" style="padding: 20rpx 0;">
				<!-- <view class="iconfont iconhelp line-height-100"></view> -->
				<!-- <view>优惠券不与满赠、满减活动共享</view> -->
			</view>
			<!-- 支付方式 begin -->
			<view class="payment">
				<list-cell last :hover="false"><text>支付方式</text></list-cell>
				<!-- <list-cell>
					<view class="d-flex align-items-center justify-content-between w-100 disabled">
						<view class="iconfont iconbalance line-height-100 payment-icon"></view>
						<view class="flex-fill">余额支付（余额￥0）</view>
						<view class="font-size-sm">余额不足</view>
						<view class="iconfont iconradio-button-off line-height-100 checkbox"></view>
					</view>
				</list-cell> -->
				<list-cell last>
					<view class="d-flex align-items-center justify-content-between w-100">
						<view class="iconfont iconwxpay line-height-100 payment-icon" style="color: #7EB73A;"></view>
						<view class="flex-fill">微信支付</view>
						<view class="iconfont iconradio-button-on line-height-100 checkbox checked"></view>
					</view>
				</list-cell>
			</view>
			<!-- 支付方式 end -->
			<!-- 备注 begin -->
			<list-cell arrow last @click="goToRemark">
				<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0 mr-20">备注</view>
					<view class="text-color-primary flex-fill text-truncate text-right">{{ form.postscript || '点击填写备注' }}</view>
				</view>
			</list-cell>
			<!-- 备注 end -->
		</view>
		<!-- 付款栏 begin -->
		<view class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
			<view class="font-size-sm" style="margin-left: 20rpx;">合计：</view>
			<view class="font-size-lg flex-fill" v-if="orderType == 'takeout'">￥{{ amount }}元</view>
			<view class="font-size-lg flex-fill" v-else>￥{{ amount- parseFloat(freightPrice)}}元</view>
			<view class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base" style="padding: 0 60rpx;" @tap="submit">付款</view>
		</view>
		<!-- 付款栏 end -->
		<modal :show="ensureAddressModalVisible" custom :mask-closable="false" :radius="0" width="90%">
			<view class="modal-content">
				<view class="d-flex justify-content-end">
					<image src="/static/images/pay/close.png" style="width: 40rpx; height: 40rpx;" @tap="ensureAddressModalVisible = false"></image>
				</view>
				<view class="d-flex just-content-center align-items-center" style="margin-bottom: 40px;"><view class="font-size-extra-lg text-color-base">请再次确认下单地址</view></view>
				<view class="d-flex font-size-base text-color-base font-weight-bold align-items-center justify-content-between mb-20">
					<view>{{ address.consignee }}</view>
					<view>{{ address.mobile }}</view>
				</view>
				<view class="d-flex font-size-sm text-color-assist align-items-center justify-content-between mb-40">
					<!-- <view>{{ address.street + address.door_number }}</view> -->
					<view>
					{{ `${address.provinceName}${address.cityName}${address.areaName}${address.communityName ? address.communityName : ''}${address.address}` }}
					</view>
					<button type="primary" size="mini" plain class="change-address-btn" @click="chooseAddress">修改地址</button>
				</view>
				<button type="primary" class="pay_btn" @tap="pay">确认并付款</button>
			</view>
		</modal>
	</view>
</template>

<script>
import { handleWXPay,getDistance} from '@/utils';
import { mapGetters, mapMutations, mapActions } from 'vuex';
import listCell from '@/components/list-cell/list-cell';
import modal from '@/components/modal/modal';
export default {
	components: { listCell, modal },
	data() {
		return {
			cart: {},
			form: { postscript: '' },
			ensureAddressModalVisible: false,
			freightPrice:0
		};
	},
	computed: {
		...mapGetters(['orderType', 'address', 'store']),
		total() {
			return this.cart.payinfo && this.cart.payinfo.orderTotalPrice;
		},
		amount() {
			return this.cart.payinfo && this.cart.payinfo.actualPrice;
		}
	},
	onLoad(option) {
		//重新获取购物车数据
		this.getCartInfo();
		uni.$on('refresh-remark', this.refreshRemark);
	/* 	this.cart = uni.getStorageSync('cart');
		this.freightPrice = this.cart.payinfo.freightPrice; */
	},
	onUnload() {
		uni.$off('refresh-remark', this.refreshRemark);
	},
	methods: {
		...mapMutations(['SET_ORDER','SET_ORDER_TYPE']),
		...mapActions(['orderSubmit', 'prepay','getCart','cartCheckOut']),
		goToRemark() {
			uni.navigateTo({
				url: '/pages/remark/remark?remark=' + this.form.postscript
			});
		},
		changeOrderType(event) {
			let checked = event.detail.value;
			if (checked) {
				this.SET_ORDER_TYPE('takein');					
			} else {
				this.SET_ORDER_TYPE('takeout');
			}
		},
		chooseAddress() {
			uni.navigateTo({
				url: '/pages/address/address?is_choose=true&scene=pay'
			});
		},
		submit() {
			if (this.orderType == 'takeout') {
				this.ensureAddressModalVisible = true;
			} else {
				this.pay();
			}
		},
		async getCartInfo(){
			uni.showLoading({
				mask:true
			})
			//重新计算收货点与店面的距离
				let distance = getDistance(this.address.lat,this.address.lng,this.store.lat,this.store.lng);
			//重新获取支付信息
				await this.cartCheckOut({
					freightDistance:distance,
					shopId:this.store.id,
					addressId:this.address.id
				}).then(res=>{
					uni.hideLoading();
					const payinfo = Object.assign({}, { payinfo: res.data });	
					this.cart = payinfo;
					this.freightPrice = this.cart.payinfo.freightPrice;
					uni.setStorageSync('cart', payinfo);
				}).catch(err=>{
					console.log('err',err);
					uni.hideLoading();
				})
		},
		pay() {
			uni.showLoading({ title: '加载中' });
			this.orderSubmit({
				addressId: this.orderType == 'takein' ? 0 : this.address.id,
				freightPrice: this.cart.payinfo.freightPrice,
				postscript: this.form.postscript || ''
			}).then(res => {
				const orderInfo = res.data.orderInfo;
				if (orderInfo) {
					this.prepay({ orderId: orderInfo.id }).then(order => {
						console.log(order);
						handleWXPay(order.data).then(payRes => {
							if (payRes.errMsg == 'requestPayment:ok') {
								uni.showToast({
									title: '支付成功',
									icon: 'success',
									duration: 1000
								});
							} else {
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									mask: true,
									duration: 1000
								});
							}
							setTimeout(() => {							
								uni.reLaunch({
									url: '/pages/myOrder/myOrder'
								});
							}, 1000);
						});
					});
				}
			});
		},
		refreshRemark(remark) {
			remark && this.$set(this.form, 'postscript', remark);
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	.isTakeIn{
		background:#FFF;
		padding:30rpx;
		margin-bottom:30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.title{
			font-size: 24rpx;
			color: #5A5B5C;

		}
		switch{
			transform:scale(0.7);
		}
	}
}

.arrow {
	width: 50rpx;
	height: 50rpx;
	position: relative;
	margin-right: -10rpx;
}

.location {
	.store-name {
		font-size: $font-size-lg;
	}

	.iconfont {
		font-size: 50rpx;
		line-height: 100%;
		color: $color-primary;
	}
}

.section-1 {
	margin-bottom: 30rpx;
	.contact {
		.contact-tip {
			margin-left: 10rpx;
			border: 2rpx solid $color-primary;
			padding: 6rpx 10rpx;
			color: $color-primary;
		}
	}
}

.section-2 {
	.name-and-props {
		width: 65%;
	}
}

.payment {
	margin-bottom: 30rpx;

	.disabled {
		color: $text-color-grey;
	}

	.payment-icon {
		font-size: 44rpx;
		margin-right: 10rpx;
	}

	.checkbox {
		font-size: 36rpx;
		margin-left: 10rpx;
	}

	.checked {
		color: $color-primary;
	}
}

.pay-box {
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
	height: 100rpx;
}

.modal-content {
	.change-address-btn {
		line-height: 2;
		padding: 0 1em;
	}
	.pay_btn {
		width: 100%;
		border-radius: 50rem !important;
		line-height: 3;
	}
}
</style>
